// 字体百分比换算
var nowClientWidth = document.documentElement.clientWidth;

function nowSize(val, initWidth = 1920) {
  return val * (nowClientWidth / initWidth);
}

// 专利技术利用率
function patentChart(patentTotal, patentArray) {
  var myChart = echarts.init(document.getElementById('patent'));
  // 指定图表的配置项和数据
  var option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(17,73,100,.7)',
      borderColor: 'rgba(33,213,155)',
      textStyle: {
        color: "#fff"
      },
      formatter: '<div>{b}: <span>{c}个</span><br>占比: {d}%</div>',
      // className: 'echarts-tooltip2'
    },
    title: {
      text: patentTotal + '\n总数',
      left: 'center',
      top: '35%',
      textStyle: {
        fontSize: nowSize(20),
        color: "#1CC78E",
        background: '#fff',
      }
    },
    legend: {
      bottom: '5%',
      left: 'center',
      icon: "circle",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 5,
      textStyle: {
        color: '#707070',
        fontSize: 12
      }
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      center: ["50%", "45%"],
      label: {
        show: false,
        position: 'outside',
        formatter: '{b}:{c}个\n占比:{d}%',
        color: '#fff',
        minMargin: 5,
        edgeDistance: 30,
        lineHeight: 20,
        alignTo: 'edge',
      },
      labelLine: {
        length: 20,
        length2: 0,
        maxSurfaceAngle: 80
      },
      // labelLayout: function (params) {
      //   const isLeft = params.labelRect.x < myChart.getWidth() / 2;
      //   const points = params.labelLinePoints;
      //   points[2][0] = isLeft
      //     ? params.labelRect.x
      //     : params.labelRect.x + params.labelRect.width;
      //   return {
      //     labelLinePoints: points
      //   };
      // },
      data: patentArray
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  var currentIndex = 0;
  var mTime = setInterval(function() {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
  }, 3000);

  myChart.on("mouseover", function(e) {
    // 停止定时器，清除之前的高亮
    clearInterval(mTime);
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0 //清一下高亮
    });
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: e.dataIndex, //当前鼠标选中的高亮
    });
    currentIndex = e.dataIndex
  })

  myChart.on("mouseout", function(e) {
    // 停止定时器，清除之前的高亮
    mTime = setInterval(function() {
      var dataLen = option.series[0].data.length;
      // 取消之前高亮的图形
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      currentIndex = (currentIndex + 1) % dataLen;
      // 高亮当前图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex
      });
    }, 3000);
  })

  window.addEventListener("resize", function() {
    myChart.resize();
  });
}

// 行业分布占比
function industryChart(xAxisArray, industrialDistributionArray) {
  var myChart = echarts.init(document.getElementById('trade'));
  var option = {
    tooltip: {
      trigger: "axis",
      show: true,
      backgroundColor: 'rgba(17,73,100,.7)',
      borderColor: 'rgba(33,213,155)',
      textStyle: {
        color: "#fff"
      },
      formatter: function(params) {
        var tar = params[0];
        var number = params[0].dataIndex;
        return '<div class="title01">' + tar.name + '</div>' + '<div>' + '数量: ' + '<span>' + tar.data.count + '</span>' + '</div>' + '<div>' + '占比: ' + '<span>' + tar.value + '%' + '</span>' + '</div>';
      },
      className: 'echarts-tooltip'
    },
    legend: {
      show: true,
      top: '0%',
      zlevel: '5',
      left: 'center',
      icon: "circle",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 5,
      textStyle: {
        color: '#707070',
        fontSize: 12
      }
    },
    grid: {
      left: "15%",
      top: "18%",
      bottom: "18%",
      right: "10%"
    },
    xAxis: {
      type: 'category',
      data: xAxisArray,
      axisLine: {
        lineStyle: {
          color: "#0C415C"
        }
      },
      axisLabel: {
        interval: 0,
        color: "#fff"
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value} %',
        color: "#fff"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#0C415C"
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#0C415C"
        }
      },
      boundaryGap: true,
      min: 0,
      max: 100,
      name: "单位:百分比",
      nameTextStyle:{
        color:"#fff"
      }
    },
    series: [{
      data: industrialDistributionArray,
      type: 'bar',
      barWidth: "40%",
      itemStyle: {
        normal: {
          barBorderRadius: [10, 10, 0, 0]
        },
        emphasis: {
          barBorderRadius: [10, 10, 0, 0]
        }
      }
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
};

// 设备监测
function deviceChart(dataset) {
  var myChart = echarts.init(document.getElementById('device'));
  var option = {
    tooltip: {
      trigger: "axis",
      show: true,
      backgroundColor: 'rgba(17,73,100,.7)',
      borderColor: 'rgba(33,213,155)',
      textStyle: {
        color: "#fff"
      },
      formatter: function(params) {
        var tar = params[0];
        var number = params[0].dataIndex;
        return '<div>' + tar.name + '设备数:' + '<span>' + dataset[number].amount + '</span>' + '</div>' + '<div>' + tar.name + '设备占比: ' + '<span>' + tar.value + '%' + '</span>' + '</div>';
      },
      className: 'echarts-tooltip1'
    },
    grid: {
      zlevel: '2',
      left: "10%",
      top: "20%",
      bottom: "20%",
      right: "10%"
    },
    legend: {
      show: true,
      left: 0,
      top: 0
    },
    yAxis: {
      type: 'category',
      data: ['故障', '异常', '正常'],
      axisLine: {
        show: true,
        lineStyle: {
          color: "#0C415C"
        }
      },
      axisLabel: {
        interval: 0,
        color: "#fff"
      }
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value} %',
        color: "#fff"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#0C415C"
        }
      },
      boundaryGap: true,
      min: 0,
      max: 100
    },
    series: [{
      data: dataset,
      type: 'bar',
      barWidth: "40%"
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  window.addEventListener("resize", function() {
    myChart.resize();
  });
};
